<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import {  showSuccessToast } from 'vant';
  import YHeader from '@/components/YHeader.vue';
  
  interface Teacher {
    id: string;
    name: string;
    avatar?: string;
    email?: string;
    isMainTeacher: boolean;
  }
  
  const router = useRouter();
  const route = useRoute();
  const courseId = computed(() => route.query.courseId as string);
  
  const teachers = ref<Teacher[]>([
    { id: '1', name: '张教授', avatar: '', isMainTeacher: true, email: 'zhang@example.com' },
    { id: '2', name: '李助教', avatar: '', isMainTeacher: false, email: 'li@example.com' },
  ]);
  
  const searchValue = ref('');
  const showAddTeacher = ref(false);
  const showRemoveConfirm = ref(false);
  const teacherToRemove = ref<Teacher | null>(null);
  const newTeacher = ref({
    name: '',
    email: '',
    isMainTeacher: false
  });
  
  const filteredTeachers = computed(() => {
    if (!searchValue.value) return teachers.value;
    
    const keyword = searchValue.value.toLowerCase();
    return teachers.value.filter(
      teacher => teacher.name.toLowerCase().includes(keyword)
    );
  });
  
  onMounted(async () => {
    // 实际项目中这里应该调用API获取教师列表
    // if (courseId.value) {
    //   try {
    //     const res = await getTeacherList(courseId.value);
    //     teachers.value = res.data;
    //   } catch (error) {
    //     console.error('获取教师列表失败', error);
    //   }
    // }
  });
  
  const onBack = () => {
    router.back();
  };
  
  const onSearch = () => {
    // 搜索功能实现
  };
  
  const addTeacher = async () => {
    // 实际项目中这里应该调用API添加教师
    // try {
    //   await addTeacherToCourse(courseId.value, newTeacher.value);
    //   showSuccessToast('添加成功');
    //   // 重新获取教师列表
    // } catch (error) {
    //   console.error('添加教师失败', error);
    //   showToast('添加失败');
    // }
    
    // 模拟添加
    const id = String(Date.now());
    teachers.value.push({
      id,
      name: newTeacher.value.name,
      email: newTeacher.value.email,
      isMainTeacher: newTeacher.value.isMainTeacher
    });
    
    showSuccessToast('添加成功');
    
    // 重置表单
    newTeacher.value = {
      name: '',
      email: '',
      isMainTeacher: false
    };
  };
  
  const confirmRemoveTeacher = (teacher: Teacher) => {
    teacherToRemove.value = teacher;
    showRemoveConfirm.value = true;
  };
  
  const removeTeacher = async () => {
    if (!teacherToRemove.value) return;
    
    // 实际项目中这里应该调用API移除教师
    // try {
    //   await removeTeacherFromCourse(courseId.value, teacherToRemove.value.id);
    //   showSuccessToast('移除成功');
    //   // 重新获取教师列表
    // } catch (error) {
    //   console.error('移除教师失败', error);
    //   showToast('移除失败');
    // }
    
    // 模拟移除
    teachers.value = teachers.value.filter(t => t.id !== teacherToRemove.value?.id);
    showSuccessToast('移除成功');
  };
  </script>
<template>
    <div class="teacher-manage">
      <y-header title="教师管理" left-arrow @click-left="onBack" />
      
      <div class="search-bar">
        <van-search
          v-model="searchValue"
          placeholder="搜索教师姓名"
          @search="onSearch"
        />
        <van-button type="primary" size="small" icon="plus" @click="showAddTeacher = true">添加教师</van-button>
      </div>
      
      <div class="teacher-list">
        <van-empty v-if="teachers.length === 0" description="暂无教师" />
        
        <van-swipe-cell v-for="teacher in filteredTeachers" :key="teacher.id">
          <van-cell>
            <template #title>
              <div class="teacher-item">
                <van-image
                  round
                  width="40"
                  height="40"
                  :src="teacher.avatar || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
                />
                <div class="teacher-info">
                  <div class="teacher-name">{{ teacher.name }}</div>
                  <div class="teacher-role">{{ teacher.isMainTeacher ? '主讲教师' : '助教' }}</div>
                </div>
              </div>
            </template>
            <template #right-icon>
              <van-icon name="arrow" />
            </template>
          </van-cell>
          <template #right>
            <van-button square type="danger" text="删除" @click="confirmRemoveTeacher(teacher)" />
          </template>
        </van-swipe-cell>
      </div>
      
      <!-- 添加教师弹窗 -->
      <van-dialog
        v-model:show="showAddTeacher"
        title="添加教师"
        show-cancel-button
        @confirm="addTeacher"
      >
        <van-form>
          <van-field
            v-model="newTeacher.name"
            name="name"
            label="姓名"
            placeholder="请输入教师姓名"
            :rules="[{ required: true, message: '请输入教师姓名' }]"
          />
          <van-field
            v-model="newTeacher.email"
            name="email"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[{ required: true, message: '请输入邮箱' }]"
          />
          <van-field name="role" label="角色">
            <template #input>
              <van-radio-group v-model="newTeacher.isMainTeacher" direction="horizontal">
                <van-radio :name="true">主讲教师</van-radio>
                <van-radio :name="false">助教</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </van-form>
      </van-dialog>
      
      <!-- 删除确认弹窗 -->
      <van-dialog
        v-model:show="showRemoveConfirm"
        title="确认删除"
        show-cancel-button
        @confirm="removeTeacher"
      >
        <p style="padding: 20px 16px;">确定要将教师 {{ teacherToRemove?.name }} 从课程中移除吗？</p>
      </van-dialog>
    </div>
  </template>
  
  
  
  <style scoped>
  .teacher-manage {
    background-color: #f7f8fa;
    min-height: 100vh;
  }
  
  .search-bar {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #fff;
  }
  
  .search-bar .van-search {
    flex: 1;
    padding: 10px 0;
  }
  
  .teacher-list {
    margin: 16px;
  }
  
  .teacher-item {
    display: flex;
    align-items: center;
  }
  
  .teacher-info {
    margin-left: 12px;
  }
  
  .teacher-name {
    font-size: 16px;
    font-weight: 500;
  }
  
  .teacher-role {
    font-size: 13px;
    color: #646566;
    margin-top: 4px;
  }
  </style>